<!-- 音乐播放器 -->
<template>
  <div>
    <audio @canplay="getDuration" @timeupdate="updateTime" ref="audio" :src="currUrl"></audio>
    <div id="app-cover">
      <div id="player">
        <div style="height:93px;" id="player-track">
          <div style="height:26px;" id="album-name">{{name[currIndex]}}</div>
          <div style="height:20px; margin:0px;" id="track-name">{{title[currIndex]}}</div>
          <div style="height:15px;" id="track-time" class="mb-5">
            <div style="background:transparent; color:#f86d92;" id="current-time">{{toTime(currentTime)}}</div>
            <div style="background:transparent; color:#f86d92;" id="track-length">{{toTime(duration)}}</div>
          </div>
          <div style="width:194px;" class="mt-5" id="s-area" @click="jump()">
            <div v-if="preTime > 0" :style="'display:block; left:'+(193*preTime/duration)+'px;'" id="ins-time">{{toTime(preTime)}}</div>
            <div @mouseleave="clear()" :style="'width:'+(preTime/duration * 100)+'%'" id="s-hover"></div>
            <div :style="'width:'+(currentTime/duration * 100)+'%'" id="seek-bar"></div>
          </div>
        </div>

        <div id="player-content">
          <div id="album-art">
            <img src="../../../static/assets/imgs/music/icon.jpg" class="active" id="_1">
            <div id="buffer-box">load...</div>
          </div>
          <div id="player-controls">
            <div class="control">
              <div style="border:none; width:76px; height:76px;" class="button" id="play-previous" @click="change(-1)">
                <i class="fas fa-backward"></i>
              </div>
            </div>
            <div class="control">
              <div style="border:none; width:76px; height:76px;" class="button" id="play-pause-button" @click="play()">
                <i class="fas fa-play"></i>
              </div>
            </div>
            <div class="control">
              <div style="border:none; width:76px; height:76px;" class="button" id="play-next" @click="change(1)">
                <i class="fas fa-forward"></i>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件,工具js,第三方插件js,json文件,图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
import bus from '../../utils/bus.js'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['music'],
    data() {
      //这里存放数据
      return {
        currUrl: 'http://dev.kingyin.club:9000/cloud/Rom%E9%82%A2%E9%94%90%20-%20%E6%98%9F%E6%B2%B3%E4%B8%87%E9%87%8C.mp3',
        duration: 0,
        currentTime: 0,
        currIndex: 0,
        preTime:0,
        name: this.music.name,
        title: this.music.title,
        urls: this.music.urls,
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      currentSong() { //监听正在播放的歌曲改变
        this.$nextTick(() => {
          this.$refs.audio.play();  //此时duration为NaN
        })
      },
    },
    //方法集合
    methods: {
      getDuration() {
        this.duration = this.$refs.audio.duration;  //此时可以获取到duration
      },
      updateTime(e) {
        // 监听状态
        this.currentTime = e.target.currentTime; //获取audio当前播放时间
        if (this.currentTime == this.duration) {
          this.change(1);
        }
      },
      jump() {
        this.$refs.audio.currentTime = this.preTime;
      },
      play() {
        if (this.$refs.audio.paused) {
          $("#player-track").addClass('active');
          $('#album-art').addClass('active');
          $("#play-pause-button").find('i').attr('class', 'fas fa-pause');
          this.$refs.audio.play();
        } else {
          $("#player-track").removeClass('active');
          $('#album-art').removeClass('active');
          $('#album-art').removeClass('buffering');
          $("#play-pause-button").find('i').attr('class', 'fas fa-play');
          this.$refs.audio.pause();
        }
      },
      async change(val) {
        if (val == 0) return;
        this.currIndex += val;
        if (this.currIndex == -1) {
          this.currIndex = this.urls.length - 1;
        } else if (this.currIndex == this.urls.length) {
          this.currIndex = 0;
        }
        if (this.$refs.audio.paused) {
          $("#player-track").addClass('active');
          $('#album-art').addClass('active');
          $("#play-pause-button").find('i').attr('class', 'fas fa-pause');
        }
        this.currUrl = this.urls[this.currIndex];

        const cd = {
          path:this.currUrl,
          idx:this.currIndex
        }
        // 分发事件
        const pram = {
          name:'music',
          data:cd
        }
        bus.$emit('loadComment',pram);

        await this.$refs.audio.load();
        this.$refs.audio.play();
      },
      toTime(value) {
        if (!value) return '00:00'
        let interval = Math.floor(value)
        let minute = (Math.floor(interval / 60)).toString().padStart(2, '0')
        let second = (interval % 60).toString().padStart(2, '0')
        return `${minute}:${second}`
      },
      clear() {
        this.preTime = 0;
      },
      showHover(event) {
        
        this.preTime = (this.duration * event.offsetX / 193)
        
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      var that = this;
      $('#s-area').mousemove(function (event) {
          that.showHover(event);
        });
        $('#ins-time').css('display','block');
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  }

</script>
<style scoped>
  *:focus {
    outline: none;
  }

  #app-cover {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 430px;
    height: 100px;
    margin: -4px auto;
  }

  #bg-artwork {
    position: fixed;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url(http://k003.kiwi6.com/hotlink/8msy543338/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: 1;
  }

  #bg-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.51;
    z-index: 2;
  }

  #player {
    position: relative;
    height: 100%;
    z-index: 3;
  }

  #player-track {
    position: absolute;
    top: 0;
    right: 15px;
    left: 15px;
    padding: 13px 22px 10px 184px;
    background-color: #fff7f7;
    border-radius: 15px 15px 0 0;
    transition: 0.3s ease top;
    z-index: 1;
  }

  #player-track.active {
    top: -92px;
  }

  #album-name {
    color: #54576f;
    font-size: 17px;
    font-weight: bold;
  }

  #track-name {
    color: #acaebd;
    font-size: 13px;
    margin: 2px 0 13px 0;
  }

  #track-time {
    height: 12px;
    margin-bottom: 3px;
    overflow: hidden;
  }

  #current-time {
    float: left;
  }

  #track-length {
    float: right;
  }

  #current-time,
  #track-length {
    color: transparent;
    font-size: 11px;
    background-color: #ffe8ee;
    border-radius: 10px;
    transition: 0.3s ease all;
  }

  #track-time.active #current-time,
  #track-time.active #track-length {
    color: #f86d92;
    background-color: transparent;
  }

  #s-area,
  #seek-bar {
    position: relative;
    height: 4px;
    border-radius: 4px;
  }

  #s-area {
    background-color: #ffe8ee;
    cursor: pointer;
  }

  #ins-time {
    position: absolute;
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px;
    border-radius: 4px;
    display: none;
  }

  #s-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
  }

  #ins-time,
  #s-hover {
    background-color: #3b3d50;
  }

  #seek-bar {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #fd6d94;
    transition: 0.2s ease width;
    z-index: 1;
  }

  #player-content {
    position: relative;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 30px 80px #656565;
    border-radius: 15px;
    z-index: 2;
  }

  #album-art {
    position: absolute;
    top: -40px;
    width: 115px;
    height: 115px;
    margin-left: 40px;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    transition: 0.3s ease all;
    box-shadow: 0 0 0 10px #fff;
    border-radius: 50%;
    overflow: hidden;
  }

  #album-art.active {
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
  }

  #album-art:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px auto 0 auto;
    background-color: #d6dee7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    z-index: 2;
  }

  #album-art img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
  }

  #album-art img.active {
    opacity: 1;
    z-index: 1;
  }

  #album-art.active img.active {
    z-index: 1;
    -webkit-animation: rotateAlbumArt 3s linear 0s infinite forwards;
    animation: rotateAlbumArt 3s linear 0s infinite forwards;
  }

  @-webkit-keyframes rotateAlbumArt {
    0% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
    }

    100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
  }

  @keyframes rotateAlbumArt {
    0% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
    }

    100% {
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
  }

  #buffer-box {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    font-family: Helvetica;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 6px;
    margin: -12px auto 0 auto;
    background-color: rgba(255, 255, 255, 0.19);
    opacity: 0;
    z-index: 2;
  }

  #album-art img,
  #buffer-box {
    transition: 0.1s linear all;
  }

  #album-art.buffering img {
    opacity: 0.25;
  }

  #album-art.buffering img.active {
    opacity: 0.8;
    filter: blur(2px);
    -webkit-filter: blur(2px);
  }

  #album-art.buffering #buffer-box {
    opacity: 1;
  }

  #player-controls {
    width: 250px;
    height: 100%;
    margin: 0 5px 0 141px;
    float: right;
    overflow: hidden;
  }

  .control {
    width: 33.333%;
    float: left;
    padding: 12px 0;
  }

  .button {
    width: 26px;
    height: 26px;
    padding: 25px;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
  }

  .button i {
    display: block;
    color: #d6dee7;
    font-size: 26px;
    text-align: center;
    line-height: 1;
  }

  .button,
  .button i {
    transition: 0.2s ease all;
  }

  .button:hover {
    background-color: #d6d6de;
  }

  .button:hover i {
    color: #fff;
  }

  #follow-me-link {
    top: 10px;
    font-size: 13px;
    padding: 5px 7px;
    background-color: #f86d92;
    border-radius: 2px;
  }

  #share-link {
    top: 45px;
    width: 16px;
    height: 16px;
    padding: 10px;
    font-size: 16px;
    background-color: #7dca24;
    border-radius: 50%;
  }

  #follow-me-link,
  #share-link {
    position: fixed;
    right: 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    z-index: 125;
  }

</style>
